<template>
	<view class="content">
		<!-- 监控画面 -->
		<view class="videos">
			<yingbing-video 
			autoplay 
			muted 
			is-live 
			:barrage-show="barragesShow" 
			:src="src"  
			:fivConfig = "flvConfig"
			@error="handleError" 
			formats='flv' 
			style="width: 100%;height: 100%;"
			/>
			
		</view>
		<!-- 下拉框 -->
		<view class="top">
			<uni-data-select
			v-model="value"
			:localdata="range"
			@change="change"
			class="SelectBox"
			>
			</uni-data-select>
			<uni-data-select
				v-model="value1"
				:localdata="range1"
				@change="change1"
				class="SelectBox1"
			>
			</uni-data-select>
			
			<!-- 选项卡 -->
			<view class="Btn">
				<!-- 机器人 -->
				<view class="robotBtn" @click="robotBtnClick" :class="{ active: isRobotActive }">
					机器人
				</view>
				<!-- plc -->
				<view class="plcBtn" @click="plcBtnClick" :class="{ active: isPlcActive }">
					PLC
				</view>
			</view>
		</view>
		<!-- 设备运行参数 -->
		<view class="sbyx">
			<!-- 头部标题 -->
			<view class="sbyxText">
				<view style="width: 11rpx;height: 35rpx;background-color: #FFC515;"></view>
				<text class="Title">
					设备运行参数
				</text>
			</view>
			<!-- 表单 -->
			<view class="sbyxForm">
				<view class="sbyxForm1">
					<view class="sbyxForm1-1">
						电机电压(v)
					</view>
					<view class="sbyxForm1-1">
						电机温度(℃)
					</view>
					<view class="sbyxForm1-1">
						机器人方向
					</view>
					<view class="sbyxForm1-1">
						电池状态
					</view>
				</view>
					<view class="sbyxForm2">
						<view class="sbyxForm2-1">
							{{dcdy}}
						</view>
						<view class="sbyxForm2-1">
							{{djwd}}
						</view>
						<view class="sbyxForm2-1">
							{{jqrfx}}
						</view>
						<view class="sbyxForm2-1">
							{{dczt}}
						</view>
					</view>
				<view class="sbyxForm1">
					<view class="sbyxForm1-1">
						速度
					</view>
					<view class="sbyxForm1-1">
						电池电量(%)
					</view>
					<view class="sbyxForm1-1">
						机器人模式
					</view>
					<view class="sbyxForm1-1">
						轨道长度
					</view>
				</view>
				<view class="sbyxForm2">
					<view class="sbyxForm2-1">
						{{djzs}}
					</view>
					<view class="sbyxForm2-1">
						{{dcdl}}
					</view>
					<view class="sbyxForm2-1">
						{{jqrms}}
					</view>
					<view class="sbyxForm2-1">
						{{gdzcd}}
					</view>
				</view>
			</view>
		</view>
		<!-- 环境参数 -->
		<view class="hjcs">
			<!-- 头部标题 -->
			<view class="hjcsText">
				<view style="width: 11rpx;height: 35rpx;background-color: #15BAFF;"></view>
				<text class="Title">
					环境参数检测
				</text>
			</view>
			<!-- echarts图表 -->
			<view class="hjcsEcharts">
				<echarts :option="option" style="height:100%;width: 100%;"></echarts>
			</view>
		</view>
		<!-- 巡检轨道 -->
		<view class="xjgd">
			<!-- 头部标题 -->
			<view class="xjgdText">
				<view style="width: 11rpx;height: 35rpx;background-color: #15BAFF;"></view>
				<text class="Title">
					巡检轨道
				</text>
			</view>
			<!-- 电子地图 -->
			<view class="xjgdMap">
				<echarts :option="option1" style="height:100%;width: 100%;"></echarts>
			</view>
		</view>

	</view>
</template>

<script>
	import echarts from '../.././components/echarts/echarts.vue'; //引入Echarts组件
	import {gasenvState} from '@/api/gas/gas.js'
	import {equipmentLion} from '@/api/equipment/equipment.js'
	import {robotData} from '@/api/Manual/Manual.js'
	import {RobotsList,getTrackMaprobot,HVideo,QVideo,QVideoStop,HVideoStop} from '@/api/camera/camera.js'
	import cookie from '../../cookie.js'

	import point from '@/static/images/point1.png';
	import rbt from '@/static/images/rbt3.png';
	import rbt1 from '@/static/images/rbt4.png';
	
		
	export default {
		data(){
			return{
				token:cookie.get('access_token'),
				secretKey:cookie.get('secretKey'),
				//机器人选择
				value:cookie.get('robotid'),
				text:cookie.get('robot_name'),
				range:[
					{value:"", text:""}
				],
				//摄像头方向选择
				value1:'',
				range1: [
				  { value: 1, text: "前摄像头" },
				  { value: 2, text: "后摄像头" },
				],
				//切换机器人和plc页面
				isRobotActive: true,
				isPlcActive: false,
				//被选中机器人的id
				selectedRobotId:cookie.get('robotid'),
				//机器人名称
				robot_name:cookie.get('robot_name'),
				//被选中的机器人
				ranges:[],
				
				//环境参数部分
				dcdy: '无', //电池电压
				djwd: '无', //电机温度
				djzs: '无', //电机转速
				dcdl: '无', //电池电量
				jqrfx:'无', //机器人方向
				jqrms:'无', //机器人模式
				dczt:'无' , //电池状态
				gdzcd:'无', //轨道长度
				yq:'无', //氧气浓度
				jw:'无', //甲烷浓度
				lhq:'无', //硫化氢浓度
				aq:'无', //氨气浓度
				xcwd:'无', //现场温度
				xcsd:'无', //现场湿度
				
				option:{},
				option1:{},
				
				video_name1:'',
				video_name2:'',
				video_pwd1:'',
				video_pwd2:'',
				video_ip1:'',
				video_ip2:'',
				rtspUrl:'',
				src: '',
				flvConfig: {
					cors: true,
					hasAudio:false
				},
				barragesShow: true
			}
		},
		components: {
			echarts
		},
		onShow() {
			this.value=cookie.get('robotid'),
			//机器人名称
			this.text=cookie.get('robot_name'),
			this.selectedRobotId=cookie.get('robotid'),
			//机器人名称
			this.robot_name=cookie.get('robot_name'),
			this.robotList() //机器人切换
			this.getMap();//电子地图
			this.initPullDownRefresh(); // 初始化下拉刷新
		},
		mounted() {
			this.$nextTick(() => {
		        this.echarts1();
		    });
			this.getMap();//电子地图
			this.inquire() //查询机器人列表
			this.flvUrl() //视频地址
		},
		
		onReady() {
			setTimeout(() => {
				this.barragesShow = false
			}, 100)
		},
		methods: {
			handleError (e) {
				console.log('error', e);
			},
			initPullDownRefresh() {
			  uni.startPullDownRefresh(); // 主动触发下拉刷新
			},
			onPullDownRefresh() {
			  this.refreshData(); // 下拉刷新时执行相应的逻辑操作
			},
			refreshData() {
				// 下拉刷新时重新加载数据
				this.echarts1()//环境参数检测
				this.robotRealTime() //机器人实时数据
				this.inquire() //查询机器人列表
				// 在1秒后停止下拉刷新
				setTimeout(() => {
				  uni.stopPullDownRefresh();
				}, 1000);
			},
			//获取机器人信息
			robotList(){
				equipmentLion(this.token,this.secretKey).then(Response=>{
					Response.rows.map(item =>{
						this.range = Response.rows.map(({ id, robot_name }) => ({ value: id, text: robot_name }));
					})
				})
			},
			
			//获取设备参数详情----机器人实时参数
			robotRealTime(){
				if(this.selectedRobotId == undefined){
					this.djwd = '无'
					this.djzs = '无'
					this.dcdl = '无'
					this.dcdy = '无'
					this.jqrfx = '无'
					this.jqrms = '无'
					this.dczt = '无'
					this.gdzcd = '无'
					this.yq = '无'
					this.jw = '无'
					this.lhq = '无'
					this.aq = '无'
					this.xcwd = '无'
					this.xcsd = '无'
				}else{
					robotData(this.selectedRobotId).then(Response => {
						if(typeof Response.data != 'undefined' && Response.data != null){
							this.djwd = Response.data.djwd == null? 0 +'℃' : Response.data.djwd +'℃' //电机温度
							this.djzs = Response.data.djzs == null? "无" : Response.data.djzs  //电机转速
							this.dcdl = Response.data.dcdl == null? 0 + '%' : Response.data.dcdl + '%'  //电池电量
							this.dcdy = Response.data.dcdy == null? 0 + 'v' :Response.data.dcdy + 'v'  //电池电压
							this.jqrfx = Response.data.jqrfx == null?  "无" : Response.data.jqrfx //机器人方向
							this.jqrms = Response.data.jqrms == null?  "无" : Response.data.jqrms //机器人模式
							this.dczt = Response.data.dczt == null? "无" : Response.data.dczt //电池状态
							this.gdzcd = Response.data.gdzcd ==null? "无" :Response.data.gdzcd //轨道长度
							this.yq = Response.data.yq //氧气浓度
							this.jw = Response.data.jw //甲烷浓度
							this.lhq = Response.data.lhq //硫化氢浓度
							this.aq = Response.data.aq //氨气浓度
							this.xcwd = Response.data.xcwd //现场温度
							this.xcsd = Response.data.xcsd //现场湿度
							this.echarts1()
						}else{
							this.djwd = '无'  //电机温度
							this.djzs = '无'  //电机转速
							this.dcdl = '无'  //电池电量
							this.dcdy = '无'  //电池电压
							this.jqrfx = '无' //机器人方向
							this.jqrms = '无' //机器人模式
							this.dczt = '无'  //电池状态
							this.gdzcd = '无' //轨道长度
							this.yq = '无' //氧气浓度
							this.jw = '无' //甲烷浓度
							this.lhq = '无' //硫化氢浓度
							this.aq = '无'  //氨气浓度
							this.xcwd = '无' //现场温度
							this.xcsd = '无' //现场湿度
						}
					})
				}
			},
			//机器人页面按钮事件
			robotBtnClick(){
				this.isRobotActive = true;
				this.isPlcActive = false;
			},
			//plc页面按钮事件
			plcBtnClick(){
				this.isRobotActive = true;
				this.isPlcActive = false;
				uni.navigateTo({
					url:'/pages/camera/plc/index'
				})
			},
			//机器人选择
		  async	change(e) {
				//保存选中机器人的id
				this.ranges = this.range.find(item => item.value === e)
				
				cookie.set('robotid',this.ranges.value)
				cookie.set('robot_name',this.ranges.text)
			 
				this.selectedRobotId = this.ranges.value
				this.robot_name = this.ranges.text
				
				await this.robotRealTime() //机器人实时数据
				await this.getMap();//电子地图
			},
			
			//前后摄像头选择
			change1(e1) {
				this.cameraIndex = e1
				cookie.set('value1',this.value1)
				
				if(this.cameraIndex === 1){
					this.HStop() //停止后摄像头视频流
					this.rtspUrl = 'rtsp://' + this.video_name1 + ':' + this.video_pwd1 + '@' + this.video_ip1 + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0'
						this.flvUrl() //视频地址
				}else if(this.cameraIndex === 2){
						this.QStop() //停止前摄像头视频流
						this.rtspUrl = 'rtsp://' + this.video_name2 + ':' + this.video_pwd2 + '@' + this.video_ip2 + ':' + 554 + '/cam/realmonitor?channel=1&subtype=0'
						this.flvUrl() //视频地址
				}
			},
			
			//echarts图表
			echarts1(){
				this.option = {
					legend: {
						itemHeight:10,
						itemWidth:10,
						textStyle:{
						      fontSize:9.5,
						      color:'#333333'
						},
					},
					tooltip: {},
					dataset: {
					dimensions: [
							'product',
							'氧气浓度',
							'甲烷浓度', 
							'硫化氢浓度',
							'氨气浓度',
							'现场温度',
							'现场湿度'
					],
					source: [
						{
							product: this.robot_name, 
							氧气浓度: this.yq == '无'? 0:this.yq,
							甲烷浓度: this.jw == '无'? 0:this.jw,
							硫化氢浓度: this.lhq == '无'? 0:this.lhq ,
							氨气浓度:this.aq == '无'? 0:this.aq,
							现场温度:this.xcwd == '无'? 0:this.xcwd,
							现场湿度:this.xcsd == '无'? 0:this.xcsd
						}
					]
				},
				xAxis: { 
					type: 'category',
					axisLine: {
						lineStyle: {
						  width: 0.1
						}
					},
					//刻度线
					axisTick:{
						show:false
					},
				},
				yAxis: {},
				grid: {
					top: "35%",
					bottom: "12%",
					left: "7%",
					right: "1%"
				},
				series: [
					{
														type: 'bar',
														barWidth: '22.5', // 设置柱子的宽度
														barGap:'100%', //同一组柱子之间的距离
														// barCategoryGap: '10%', // 设置不同组之间的柱子间距
														itemStyle:{
															color:{
																type: 'linear',
																x: 0,
																y: 1,
																colorStops: [
																	// 0%处的颜色
																	{
																	 offset: 1,
																	 color: '#869DE4',
																	},
																	// 50%处的颜色
																	{
																	 offset: 0.5,
																	 color: '#5470C6',
																	},
																	// 100%处的颜色
																	{
																	 offset: 0,
																	 color: '#5470C6',
																	},
																],
															}
														}
													}, 
					{
														type: 'bar',
														barWidth: '22.5', // 设置柱子的宽度
														barGap:'100%', //同一组柱子之间的距离
														itemStyle:{
															color:{
																type: 'linear',
																x: 0,
																y: 1,
																colorStops: [
																	// 0%处的颜色
																	{
																	 offset: 1,
																	 color: '#A9E18E',
																	},
																	// 50%处的颜色
																	{
																	 offset: 0.5,
																	 color: '#91CC75',
																	},
																	// 100%处的颜色
																	{
																	 offset: 0,
																	 color: '#91CC75',
																	},
																],
															}
														}
													}, 
					{
														type: 'bar',
														barWidth: '22.5', // 设置柱子的宽度
														barGap:'100%', //同一组柱子之间的距离
														itemStyle:{
															color:{
																type: 'linear',
																x: 0,
																y: 1,
																colorStops: [
																	// 0%处的颜色
																	{
																	 offset: 1,
																	 color: '#FAC858',
																	},
																	// 50%处的颜色
																	{
																	 offset: 0.5,
																	 color: '#DEA015 ',
																	},
																	// 100%处的颜色
																	{
																	 offset: 0,
																	 color: '#DEA015 ',
																	},
																],
															}
														}
													}, 
					{
														type: 'bar',
														barWidth: '22.5', // 设置柱子的宽度
														barGap:'100%', //同一组柱子之间的距离
														itemStyle:{
															color:{
																type: 'linear',
																x: 0,
																y: 1,
																colorStops: [
																	// 0%处的颜色
																	{
																	 offset: 1,
																	 color: '#FC8D8D',
																	},
																	// 50%处的颜色
																	{
																	 offset: 0.5,
																	 color: '#EE6666',
																	},
																	// 100%处的颜色
																	{
																	 offset: 0,
																	 color: '#EE6666',
																	},
																],
															}
														}
													}, 
					{
														type: 'bar',
														barWidth: '22.5', // 设置柱子的宽度
														barGap:'100%', //同一组柱子之间的距离
														itemStyle:{
															color:{
																type: 'linear',
																x: 0,
																y: 1,
																colorStops: [
																	// 0%处的颜色
																	{
																	 offset: 1,
																	 color: '#70F0FF ',
																	},
																	// 50%处的颜色
																	{
																	 offset: 0.5,
																	 color: '#58E9FA ',
																	},
																	// 100%处的颜色
																	{
																	 offset: 0,
																	 color: '#58E9FA ',
																	},
																],
															}
														}
													}, 
					{
														type: 'bar',
														barWidth: '22.5', // 设置柱子的宽度
														barGap:'100%', //同一组柱子之间的距离
														itemStyle:{
															color:{
																type: 'linear',
																x: 0,
																y: 1,
																colorStops: [
																	// 0%处的颜色
																	{
																	 offset: 1,
																	 color: '#8975D8 ',
																	},
																	// 50%处的颜色
																	{
																	 offset: 0.5,
																	 color: '#735CCB',
																	},
																	// 100%处的颜色
																	{
																	 offset: 0,
																	 color: '#735CCB',
																	},
																],
															}
														}
													}
				]
				};
			},
			//查询机器人列表
			inquire(){
				RobotsList(this.token,this.secretKey,this.selectedRobotId).then(Response=>{
					this.video_name1 = Response.rows[0].video_name1
					this.video_pwd1 = Response.rows[0].video_pwd1
					this.video_ip1 = Response.rows[0].video_ip1
					this.video_name2 = Response.rows[0].video_name2
					this.video_pwd2 = Response.rows[0].video_pwd2
					this.video_ip2 = Response.rows[0].video_ip2
				})
			},
			//flv视频地址
			flvUrl(){
				//前摄像头
				if(this.cameraIndex === 1){
					QVideo(this.rtspUrl).then(Response=>{
						this.src = Response.data
					})
				}else if(this.cameraIndex === 2){
					//后摄像头
					HVideo(this.rtspUrl).then(Response=>{
						this.src = Response.data
					})
				}
			},
			
			//前摄像头停止
			QStop(){
				QVideoStop().then(Response=>{})
			},
			
			//后摄像头停止
			HStop(){
				HVideoStop().then(Response=>{})
			},
			
			//电子地图
			getMap() {
				if (typeof (this.selectedRobotId) != "undefined" && this.selectedRobotId != null) {
					getTrackMaprobot(this.selectedRobotId).then(response => {
						if (typeof (response) != "undefined" && response != null && response.data != null && response.data.dzdt.length > 0) {
						this.result = response.data.dzdt;
						this.arrdata = [[]];//初始化地图值
						//机器人运行轨迹 轨道地图数据
						//如果有当前巡检点位置坐标获取当前位置坐标
						if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
						  let xjbh = response.data.xjbh;//巡检点编号
						  let positionxy = response.data.positionxy.split(",");//xy坐标
						  cookie.remove("xposition");//删除键值  机器人开始位置x坐标
						  cookie.remove("yposition");//删除键值 机器人开始位置y坐标
						  cookie.remove("xjbh");//删除键值 机器人开始位置y坐标
						  cookie.set("xposition", positionxy[0]);//存储值 机器人开始位置x坐标
						  cookie.set("yposition", positionxy[1]);//存储值 机器人开始位置y坐标
						  cookie.set("xjbh", xjbh);//存储值 巡检点编号
						}
						for (let i = 0; i < this.result.length; i++) {
						  //因为我在后台取出来的数据是一行的，字符串形式
						  let dataArray = this.result[i].xyposition.split(",");
						  //这句话是必须的，每次都要新建一个一维数组,不然会报错
						  this.arrdata[i] = new Array();
						 for (let j = 0; j < dataArray.length; j++) {
						     this.arrdata[i][j] = dataArray[j];
						  }
					}
					const dtop = this.arrdata;
					//电子地图
					if (this.count % 2 == 0)
						this.initEcharts(dtop, cookie.get("xposition"), cookie.get("yposition"), cookie.get("xjbh"), 1);   //交替getMap
					else
					  this.initEcharts(dtop, cookie.get("xposition"), cookie.get("yposition"), cookie.get("xjbh"), 2);
						            this.count += 1;
						          } else {
						            this.initEcharts(0, 0, 0, 1);
						            this.result = null;
						          }
						        });
						      } else {
						        this.initEcharts(0, 0, 0, 1);
						        this.result = null;
						      }
			},
			
			//电子轨道图方法
			initEcharts(dtop, xposition, yposition, xjbh, fg) {
				//轨道地图数据
				const data = dtop;
				let img = uni.createSelectorQuery('img')
				img.src = (this.picpath == null || this.picpath == '') ? require('@/static/images/map-default.png'): this.picpath
				this.option1 = {
				tooltip: {
				  trigger: 'item',
				  formatter: (params) => {  // params就是数据，这里可以打印一下看看
				    // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
				    if (typeof params.data[0] == 'undefined') {
				      return ``
				    } else {
				      return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
				    }
				  }
				},
				title: {
					/* text: '机器人巡检轨迹图',*/
					left: 'center'
				},
				grid: {//底图四个方向调整
					top: '15%',
					bottom: '10%',
					left: '2%',
					right: '2%'
				},
				xAxis: {
					splitLine: { //网格线
						show: false
					},
					type: 'value',
					axisLine: {
						onZero: false,
						show: false//隐藏y轴
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false, //隐藏刻度值
					}
				},
				yAxis: {
				  splitLine: { //网格线
				    show: false
				  },
				  type: 'value',
				  axisLine: {
				    onZero: false,
				    show: false//隐藏y轴
				  },
				  axisTick: {
				    show: false,  //刻度线
				  },
				  axisLabel: {
				    show: false, //隐藏刻度值
				  }
				},
				series: [
				  {
				    label: {
				      //color: '#cefc04',
				      show: true,
				      position: "top",
				      formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
				      textStyle: { color: '#272822', fontSize: 8 }
				    },
				    id: 'a',
				    /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
				    type: 'line',
				    smooth: true,// true 曲线
				    itemStyle: {
						// 设置线条颜色
						normal: {
							color: {
							  colorStops: [{
							    offset: 0.5, color: '#0352b7' // 0% 处的颜色
							  }, {
							    offset: 1, color: '#0352b7' // 100% 处的颜色
							  }]
						},
							lineStyle: {
								width: (this.picpath == null || this.picpath == '') ? 4 : 4,
								type: (this.picpath == null || this.picpath == '') ? 'solid' : 'solid'//可选值还有 dotted  solid
							}
						}
					},
					symbolSize: 6,//巡检点大小
					symbol: 'image://' + point,//巡检点图标
					data: data,
					//  symbol: 'circle',
					markPoint: {
						label: {
							color: 'blue',  // 文字颜色
							// padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
							show: true,
							//formatter: '巡检机器人'// 自定义文字内容
						},
						//机器人大小
						itemStyle: {
							color: {
								type: 'linear',
								colorStops: [{
									offset: 0, color: 'red' // 0% 处的颜色
								}, {
									offset: 1, color: 'red' // 100% 处的颜色
								}]
							}
						},
						symbol: 'pin',
						// symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
										        // 自定义图片作为标注展示
										        // symbolSize: [58, 38],  // 调整图片的长宽
										        // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
										        symbolSize: 18,//机器人大小
										        data: [{//1机器人移动坐标位置
										          xAxis: xposition,
										          yAxis: yposition,
										          value: xjbh,
										          fontSize: 8
										        } /*,{//2机器人移动坐标位置
										                            xAxis:23000,
										                            yAxis:21500,
										                          }*/],
										      }
										    },
										    // 闪烁点的重点是以下配置
										    {
										      // 设置圆心点特效动画、大小
										      type: 'effectScatter', data: dtop,
										      symbolSize: 5,
										      coordinateSystem: 'cartesian2d',
										      // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
										      showEffectOn: 'render',
										      // 涟漪特效配置
										      rippleEffect: {
										        color: '#1229d5',
										        scale: 4,
										        // 波纹的绘制方式,可选'stroke'和'fill'
										        brushType: 'stroke'
										      },
										      //圆心点
										      hoverAnimation: true,
										      itemStyle: {
										        normal: {
										          color: '#0f25c5',
										          shadowBlur: 80,
										          shadowColor: '#3a86ea',
										        }
										      },
										      zlevel: 1
										    }
										  ]
										}
				},
			}
		}
</script>

<style lang="scss">
	 *{
		 margin: 0;
		 padding: 0;
	 }
	 .content {
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   justify-content: center;
	 }
	 .top{
		 width: 710rpx;
		 height: 65rpx;
		 margin-top: 16rpx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 }
	 .SelectBox{
		 width: 176rpx;
		 height: 65rpx;
		 background: #FFFFFF;
		 box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		 border-radius: 10rpx;
		 font-size: 24rpx;
		 font-family: Source Han Sans CN;
		 font-weight: 400;
		 color: #999999;
	 }
	 .SelectBox /deep/ .uni-icons{
	 	 font-size: 0px !important;
	 }
	 .SelectBox1{
		 width: 256rpx;
		 height: 65rpx;
		 background: #FFFFFF;
		 box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		 border-radius: 10rpx;
		 font-size: 24rpx;
		 font-family: Source Han Sans CN;
		 font-weight: 400;
		 color: #999999;
		 margin-left: 23rpx;
	 }
	 .SelectBox1 /deep/ .uni-icons{
	 	 font-size: 0px !important;
	 }
	 .robotBtn{
		 width: 119rpx;
		 height: 46rpx;
		 border-radius: 50rpx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 }
	 .plcBtn{
		 width: 119rpx;
		 height: 46rpx;
		 border-radius: 50rpx;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 }
	
	 	.active{
	 		color:#f5f5f5;
	 		background-color: #0F174F;
	 	}
	 .videos{
		 width: 750rpx;
		 height: 410rpx;
		 background-color: black;
	 }
	 //公用的标题
	 .Title{
		 font-size: 26rpx;
		 font-family: Source Han Sans CN;
		 font-weight: bold;
		 color: #333333;
		 margin-left: 25rpx;
	 }
	 .sbyx{
		 width: 711rpx;
		 height: 285rpx;
		 margin-top: 29rpx;
	 }
	 .sbyxcs{
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 }
	 .sbyxText{
		 width: 100%;
		 height: 35rpx;
		 display: flex;
	 }
	 .sbyxForm{
		 width: 100%;
		 height: 226rpx;
		 margin-top: 24rpx;
		 background-color: #ffffff;
		 box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
		 border-radius: 10rpx;
		 display: flex;
	 }
	 .sbyxForm1{
		 width: 187rpx;
		 height: 226rpx;
		 background-color: #F1F4FE;
	 }
	 .sbyxForm2{
		 width: 174rpx;
		 height: 226rpx;
		 background-color: #FFFFFF;
	 }
	 .sbyxForm1-1{
		 height: 55rpx;
		 border-bottom: 2rpx solid #ffffff;
		 font-size: 22rpx;
		 font-family: Source Han Sans CN;
		 font-weight: 500;
		 color: #333333;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 margin-bottom: 3rpx;
	 }
	 .sbyxForm2-1{
		 height: 55rpx;
		 border-bottom: 2rpx solid #F1F4FE;
		 font-size: 22rpx;
		 font-family: Source Han Sans CN;
		 font-weight: 500;
		 color: #333333;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 margin-bottom: 3rpx;
	 }
	  .sbyxForm-row1{
			width: 200rpx;
			height: 226rpx;
			display: flex;
			flex-direction: column;
			background-color: #f1f4fe;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 59rpx;
		}
		.sbyxForm-row2{
			width: 167.5rpx;
			height: 226rpx;
			display: flex;
			flex-direction: column;
			background-color: #ccc;
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 59rpx;
		}
	 .hjcs{
		 width: 711rpx;
		 height: 413rpx;
		 margin-top: 33rpx;
	 }
	 .hjcsText{
		 width: 100%;
		 height: 35rpx;
		 display: flex;
	 }
	 .hjcsEcharts{
		 width: 100%;
		 height: 362rpx;
		 margin-top: 16rpx;
	 }
	 
	 .xjgd{
		 width: 711rpx;
		 height: 340rpx;
		 margin-top: 30rpx;
	 }
	 .xjgdText{
		 width:100%;
		 height: 35rpx;
		 display: flex;
	 }
	 .xjgdMap{
		 width: 100%;
		 height: 275rpx;
		 margin-top: 30rpx;
	 }
	 .contentPlc{
	 	display: flex;
	 	flex-direction: column;
	 	align-items: center;
	 	justify-content: center;
	 }
	 .topSelect{
	 	width: 710rpx;
	 	height: 65rpx;
	 	margin-top: 16rpx;
	 	display: flex;
	 	align-items: center;
	 }
	 .Btn{
	 	 width: 185rpx;
	 	 height: 48rpx;
	 	 border: 1rpx solid #0F174F;
	 	 border-radius: 50rpx;
	 	 display: flex;
	 	 justify-content: space-around;
	 	 align-items: center;
	 	 color: #0F174F;
	 	 font-size: 26rpx;
	 	 font-weight: 500;
	 	 font-family: Source Han Sans CN;
	 	 background-color: #f5f5f5;
	 	 margin-left: 14rpx;
	 }
	 .robotBtn{
	 	 width: 119rpx;
	 	 height: 46rpx;
	 	 border-radius: 50rpx;
	 	 display: flex;
	 	 justify-content: center;
	 	 align-items: center;
	 }
	 .plcBtn{
	 	 width: 119rpx;
	 	 height: 46rpx;
	 	 border-radius: 50rpx;
	 	 display: flex;
	 	 justify-content: center;
	 	 align-items: center;
	 }
	 
	 	.active{
	 		color:#f5f5f5;
	 		background-color: #0F174F;
	 	}
	 	.title{
	 		width: 710rpx;
	 		font-size: 26rpx;
	 		font-family: Source Han Sans CN;
	 		font-weight: 500;
	 		color: #0F174F;
	 		margin-top: 26rpx;
	 	}
	 	.dqcs{
	 		width: 710rpx;
	 		height: 571rpx;		
	 		background: #FFFFFF;
	 		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
	 		border-radius: 10rpx;
	 		margin-top: 13rpx;
	 		display: flex;
	 		flex-direction: column;
	 		justify-content: center;
	 		align-items: center;
	 	}
	 	.dqcsUl{
	 		width:380rpx;
	 		height:41rpx;
	 		list-style-type: none;
	 		margin-bottom: 19rpx;
	 		display: flex;
	 	}
	 	.dqcsLi1{
	 		width: 190rpx;
	 		height: 41rpx;
	 		font-size: 22rpx;
	 		font-family: Source Han Sans CN;
	 		color: #333333;
	 		font-weight: 500;
	 		display: flex;
	 		justify-content: flex-end;
	 		align-items: center;
	 	}
	 	.dqcsLi2{
	 		width: 130rpx;
	 		height: 41rpx;
	 		background: #F1F4FE;
	 		box-shadow: 0rpx 5rpx 6rpx 0rpx rgba(22,33,135,0.08);
	 		border-radius: 10rpx;
	 		font-size: 20rpx;
	 		font-family: Source Han Sans CN;
	 		font-weight: 500;
	 		color: #333333;
	 		display: flex;
	 		justify-content: center;
	 		align-items: center;
	 		margin-left: 38rpx;
	 	}
</style>